<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link rel="stylesheet" href="css/mi.css">
    <title></title>
</head>

<body>
    <div id="app"></div>
    <template id="root">
        <div style="width: 1226px;height: 686px;margin: 50px auto;">
            <div class="nav">
                <h2 class="nav1">手机</h2>
                <div class="nav4">
                    <a class="nav2">查看更多
                        <i class="nav3">></i>
                    </a>
                </div>
            </div>
            <div class="shop">
                <div class="span4">
                    <ul class="brick-promo-list">
                        <li class="list1">
                            <a href="">
                                <img src="img/ad1.png" alt="" style="height: 614px;width:234px;">
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="span16">
                    <ul class="brick-list">
                        <div class="list">
                            <li class="xh" v-for="s in shopList" :key="s.id">
                                <a href="">
                                    <div style="margin: 0 30px 18px;">
                                        <img :src="s.img" alt=""
                                            style="height: 160px;width: 160px; margin-right: auto;">
                                    </div>
                                    <h3 class="title">{{s.name}}</h3>
                                    <p class="desc">{{s.spec}}</p>
                                    <p class="price">
                                        <span>{{s.price}}元起</span>
                                    </p>
                                </a>
                            </li>
                        </div>
                    </ul>
                </div>
            </div>
        </div>
    </template>
    <script>
        Vue.createApp({
            template: "#root",
            data() {
                return {
                    shopList: [{
                        id: 1,
                        img: "img/phone1.png",
                        name: "Redmi k50 电竞版",
                        spec: "全线拉满的冷血旗舰",
                        price: 3299,
                    }, {
                        id: 2,
                        img: "img/phone2.png",
                        name: "Xiaomi 12 Pro",
                        spec: "全新骁龙8|2K AMOLED屏幕",
                        price: 4699,

                    }, {
                        id: 2,
                        img: "img/phone3.png",
                        name: "Xiaomi 12 Pro",
                        spec: "全新骁龙8|2K AMOLED屏幕",
                        price: 4699,
                    }, {
                        id: 2,
                        img: "img/phone4.png",
                        name: "Xiaomi 12 Pro",
                        spec: "全新骁龙8|2K AMOLED屏幕",
                        price: 4699,
                    }, {
                        id: 2,
                        img: "img/phone5.png",
                        name: "Xiaomi 12 Pro",
                        spec: "全新骁龙8|2K AMOLED屏幕",
                        price: 4699,
                    }, {
                        id: 2,
                        img: "img/phone6.png",
                        name: "Xiaomi 12 Pro",
                        spec: "全新骁龙8|2K AMOLED屏幕",
                        price: 4699,
                    }, {
                        id: 2,
                        img: "img/phone7.png",
                        name: "Xiaomi 12 Pro",
                        spec: "全新骁龙8|2K AMOLED屏幕",
                        price: 4699,
                    }, {
                        id: 2,
                        img: "img/phone8.png",
                        name: "Xiaomi 12 Pro",
                        spec: "全新骁龙8|2K AMOLED屏幕",
                        price: 4699,
                    },],
                }

            },
        }).mount(`#app`);
    </script>
</body>

</html>